<template>
    <header class="header">
        <div class="left">
            <img class="img" :src="STATIC + 'img/school_logo.png'" alt=""
                 onerror="this.src='/static/img/logo.png';this.onerror=null">
            <span>{{TITLE}}</span>
            <span>{{ user.getChineseIdentity }}</span>
        </div>
        <div class="right">
            <img :src="user.info.head" alt="" @click="openUserInfo">
            <span class="pointer" @click="back()">返回</span>
            <n-popconfirm
                @positive-click="exit"
            >
                <template #trigger>
                    <span class="pointer">退出</span>
                </template>
                是否退出系统?
            </n-popconfirm>
        </div>
    </header>
</template>

<script setup>
import {useUserStore} from "@/stores/user";
import router from "@/router";
import {useStudentStore} from "@/stores/student";
import {useRoute} from "vue-router";
import {useAppStore} from "@/stores/app";
import {SERIES, STATIC, TITLE} from "@/assets/server";

const user = useUserStore()
const route = useRoute()
const app = useAppStore()
const student = useStudentStore()



// 退出到登录页面
function exit() {
    // 清除token
    user.deleteToken()
    // 回到登录页面
    router.push({name: 'Login'})
}

function back() {
    // 回到学生主页面
    router.push({name: 'Student'})
}

function openUserInfo() {
    if (route.name === 'User') {
        router.back()
    }
    router.push({name: "User"});
}
</script>

<style scoped lang="less">
.header {
    display: flex;
    justify-content: space-between;
    height: 10vh;
    line-height: 10vh;
    color: white;
    background-color: #555555;

    .left {
        img, span {
            height: 7vh;
            margin: 0 10px;
            vertical-align: middle;
        }
    }

    .right {
        display: flex;
        height: 100%;
        // 被选中的标签变色
        .isChoose {
            color: #e0620d;
        }

        //选择页面
        div {
            display: flex;
            flex-direction: column;
            justify-content: center;

            span {
                line-height: normal;
            }
        }

        //头像与图标
        img {
            border-radius: 50%;
            width: 7vh;
            height: 7vh;
        }

        > div, span, img {
            margin: 0 15px;
        }

        > img {
            margin-top: 15px;
        }

    }
}
</style>